<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="评价" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view class="goods-bg">
			<view class="goods-item">
				<view style="width: 30%;">
					<image :src="orderInfo.sku.sku_img_url" class="card_img"></image>
				</view>
				
				<view class="med_right">
					<view class="font16">{{orderInfo.goods.name}}</view>
					<view class="font12 text-hind" style="margin-top: 15rpx;">{{orderInfo.sku.sku_name}}</view>
					<view class="flex-row items-center" style="margin-top: 15rpx;">
						<view style="color: #5c8edc;font-size: 30rpx;margin-right: 20rpx;">¥{{orderInfo.order_price}}</view>
						<view class="font12 text-hind">x{{orderInfo.order_number}}</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<view class="publish-bg">
			<view class="flex-row justify-between rate-item">
				<text>商品评价</text>
				<u-rate active-color="#5c8edc" inactive-color="#b2b2b2" v-model="rate" gutter="3"></u-rate>
			</view>
			
			<view class="input-set">
				<u--textarea height="170" v-model="value" placeholder="其他想说的..."></u--textarea>
			</view>
			
			<view style="margin: 15rpx;">
				<u-upload
				    :fileList="fileList1"
				    @afterRead="afterRead"
				    @delete="deletePic"
				    name="1"
				    multiple
				    :maxCount="1"
				  ></u-upload>
			</view>
			
		</view>
		
		
		<view class="bottom-lay">
			<u-button type="success" shape="circle" text="确定" @click="handleConfirm"></u-button>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api.js'
	export default {
		data() {
			return {
				orderInfo:{},
				rate:0,
				value:'',
				fileList1: [],
				net_img:''
			};
		},
		onLoad(op) {
			this.orderInfo = JSON.parse(decodeURIComponent(op.order));
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			// 删除图片
			deletePic(event) {
		    	this[`fileList${event.name}`].splice(event.index, 1);
				this.net_img = '';
			},
		    // 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
				  this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: "上传中",
				  });
				});
				for (let i = 0; i < lists.length; i++) {
				  const result = await this.uploadFilePromise(lists[i].url);
				  let item = this[`fileList${event.name}`][fileListLen];
				  this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
			  },
			  uploadFilePromise(url) {
				let token = this.$store.state.token;
				let that = this;
				return new Promise((resolve, reject) => {
				  let a = uni.uploadFile({
					url: api.IMG_URL,
					filePath: url,
					name: "file",
					header:{
						Apitoken : token,
					},
					formData:{
						'type' : 2
					},
					success: (res) => {
					  let json = JSON.parse(res.data);
					  that.net_img = json.data.img_url;
					  setTimeout(() => {
					   resolve(res.data.img_url);
					  }, 1000);
					},
				  });
				});
			  },
			
			handleConfirm(){
				if(this.rate == 0){
					this.$u.toast('请评分')
					return;
				}
				if(this.value == ''){
					this.$u.toast('请输入评价')
					return;
				}
				this.$request({
					url:'?c=Order&a=orderComment',
					type:'post',
					data:{
						order_id:this.orderInfo.order_id,
						star:this.rate,
						comment:this.value,
						img_url:this.net_img
					}
				}).then(res =>{
					uni.showToast({
						title:"发布成功"
					})
					setTimeout(() =>{
						uni.navigateBack()
					},1000);
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
	background-color: #F5F5F5;
}
.goods-bg{
	background-color: #fff;
	padding: 20rpx;
}
.goods-item{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 20rpx;
}
.card_img {
	height: 180rpx;
	width: 180rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
	
}
.text-hind {
	color: #909090;
	// margin-top: 15rpx;
}
.font12{
	font-size: 25rpx;
}
.font16{
	font-size: 30rpx;
}
.publish-bg{
	background-color: #fff;
	margin-top: 12rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	border-top-right-radius: 10rpx;
	border-top-left-radius: 10rpx;
}
.rate-item{
	margin: 20rpx;
}
.input-set{
	margin: 20rpx;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	width: 100%;
	padding-left: 40rpx;
	padding-right: 40rpx;
	text-align: center;
	background-color: #fff;
	align-items: center;
}
</style>
